<template>
	<Layout class="layout-container mask-all">
		<Spin fix v-if="loading" size="large"></Spin>
		<Content>
			<Layout class="layout-container padding-all">
				<div class="padding-bottom">
		            <Row>
		                <Col span="16">
		                    <ButtonGroup>
		                        <Button 
		                            icon="ios-add-circle-outline"
		                            @click="onAddClicked" v-if="perms.add" :title="button.text.add" />
		                        <Button 
		                            icon="ios-create-outline" 
		                            :disabled="button.disabled" 
		                            @click="onEditClicked" v-if="perms.edit" :title="button.text.edit" />
		                        <Button 
		                            icon="ios-remove-circle-outline" 
		                            :disabled="button.disabled" 
		                            @click="onRemoveClicked" v-if="perms.remove" :title="button.text.remove" />
		                    </ButtonGroup>
		                </Col>
		                <Col span="8">
		                    <Input search 
		                    :enter-button="search.button"
		                    :placeholder="search.placeholder" @on-search="onSearch" />
		                </Col>
		            </Row>
		        </div>
		        <Content ref="container" class="layout-page-container">
		            <Table 
		                ref="selection"
		                border
		                :height="paging.height" 
		                :loading="paging.loading" 
		                :columns="paging.columns" 
		                :data="paging.data"
		                @on-selection-change="onSelectionChange"></Table>
		        </Content>
		        <div class="padding-top">
		            <Page 
		                :current="paging.page"
		                :total="paging.total" 
		                :page-size="paging.pageSize" 
		                show-total
		                show-elevator 
		                show-sizer
		                transfer
		                @on-page-size-change="onPageSizeChange"
		                @on-change="onPageChange" />
		        </div>
			</Layout>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Page, Alert, Row, Col, Icon, Input, Button, ButtonGroup, Table, Spin } from 'view-design';
import { dateRender, perms, fit, confirm, createWindow, each, extend, dicts, toDownLoadUrl } from 'config/utils.js';
import { datagrid, remove } from './api';

//添加
const ROUTER_ADD = "sys/filemanager/add";
//修改
const ROUTER_EDIT = "sys/filemanager/edit";

export const fileSizeRender = function(h, params) {
	var value = params.row[params.column.key];
	var unit = "";
	var g = 1;
	if(value > 1024 * 1024 * 1024) {
		g = 1024 * 1024 * 1024;
		unit = "GB";
	} else if(value > 1024 * 1024) {
		g = 1024 * 1024;
		unit = "MB";
	} else {
		g = 1024;
		unit = "KB";
	}
	var point = ((value % g) / g);
	point = point > 0 ? point.toFixed(1).substring(1) : "";
	if(point == ".0") {
		point = "";
	}
	value = parseInt(value / g);
    return h('span', {}, value + point + unit);
};

export default {
	name: "SysFilemanagerManage",
	data() {
		return {
			loading: true,
			search: {
				placeholder: this.$t("info.search.placeholder"),
                button:this.$t("info.search.text"),
				value:""
			},
			perms : {
				add:false,
				edit:false,
				remove:false
			}, 
			button : {
				disabled:true,
				text: {
					add:this.$t("info.add"),
                    edit:this.$t("info.edit"),
                    remove:this.$t("info.remove")
				}
			},
			storageTypes: {

			},
			fileTypeRange: {

			},
			fileRange: {

			},
			paging:{
				height:200,
				data:[],
				columns:[
				    {
				    	type: "html",
			        	key:'name', 
			        	title:this.$t("sys.filemanager.name"),
			        	minWidth:240 
			        }, {
			        	key:'contentType', 
			        	title:this.$t("sys.filemanager.contentType"), 
			        	align:'center',
			        	width:120 
			        }, {
			        	key:'extent', 
			        	title:this.$t("sys.filemanager.extent"), 
			        	align:'center',
			        	width:120, 
			        	render: (h, params) => {
							var value = params.row[params.column.key];
							var dict = this.fileRange[value];
					        return h('span', {}, dict ? dict.label : this.$t("sys.filemanager.unknown.range"));
					    }
			        }, {
			        	key:'filetype', 
			        	title:this.$t("sys.filemanager.filetype"), 
			        	align:'center',
			        	width:120, 
			        	render: (h, params) => {
							var value = params.row[params.column.key];
							var dict = this.fileTypeRange[value];
					        return h('span', {}, dict ? dict.label : this.$t("sys.filemanager.unknown.range"));
					    }
			        }, {
			        	key:'size', 
			        	title:this.$t("sys.filemanager.size"), 
			        	align:'center',
			        	width:120,
			        	render: fileSizeRender
			        }, {
			        	key:'downloads', 
			        	title:this.$t("sys.filemanager.downloads"), 
			        	align:'center',
			        	width:100 
			        }, {
			        	key:'storetype', 
			        	title:this.$t("sys.filemanager.storetype"), 
			        	align:'center',
			        	width:120, 
			        	render: (h, params) => {
							var value = params.row[params.column.key];
							var dict = this.storageTypes[value];
					        return h('span', {}, dict ? dict.label : this.$t("sys.filemanager.unknown.type"));
					    }
			        }, {
			        	key:'uploadtime', 
			        	title:this.$t("sys.filemanager.uploadtime"),
			        	align:'center',
			        	width:170, 
			        	render: dateRender
			        }, {
						key: 'action', 
			        	title: this.$t("info.download"),
			        	align: 'center',
				    	fixed: 'right',
				    	width: 80, 
				    	render: (h, params) => {
                            return h('div', [
                                h(Button, {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        shape:"circle",
                                        icon:"md-cloud-download"
                                    },
                                    on: {
                                        click: () => {
                                            this.onDownloadClicked(params.row);
                                        }
                                    }
                                })
                            ]);
                        }
				    }
				],
				selections:[],
				loading:false,
				page:1,
				pageSize:10,
				total:0
			}
		};
	},
	methods: {

		loadDataGrid:function() {
			if(!this.paging.loading) {
				this.paging.loading = true;
				this.onSelectionChange([]);
				datagrid({
					pageNumber: this.paging.page,
					pageSize: this.paging.pageSize,
					search: this.search.value
				}, (res) => {
					if(res.success) {
						var data = res.data;
						this.paging.total = data.total;
						this.paging.data = data.rows;
					}
					this.paging.loading = false;
				});
			}
		},
		onSearch:function(value) {
			this.search.value = value;
			this.paging.page = 1;
			this.loadDataGrid();
		},
		onSelectionChange:function(rows) {
			this.paging.selections = rows;
			this.button.disabled = rows.length == 0;
		},
		onPageChange:function(page) {
			this.paging.page = page;
			this.loadDataGrid();
		},
		onPageSizeChange(size) {
			this.paging.page = 1;
			this.paging.pageSize = size;
			this.loadDataGrid();
		},
		onAddClicked() {
			createWindow({
				title: this.$t("sys.filemanager.title.add"),
				router: ROUTER_ADD,
				height: 340,
				callback: ()=> {
					this.loadDataGrid();
				}
			});
		},
		onEditClicked: function() {
			var rows = this.paging.selections;
			createWindow({
				title: this.$t("sys.filemanager.title.edit"),
				router: ROUTER_EDIT,
				params: rows[0],
				height: 240,
				callback: (result) => {
					var data = this.paging.data.find(e => e.id == result.id);
					if(data) {
						extend(data, result);
						this.onSelectionChange([]);
					}
				}
			});
		},
		onRemoveClicked: function() {
			var me = this;
			confirm("info.confirm.remove", function(isOk) {
				if(isOk) {
					var rows = me.paging.selections;
					var ids = [];
					each(rows, function() {
						ids.push(this.id);
					});
					remove(ids, (res) => {
						if(res.success) {
							me.loadDataGrid();
						}
						this.remove();
					});
					return false;
				}
			}, true);
		},
		onDownloadClicked: function(row) {
			window.open(toDownLoadUrl(row.id));
		}
	},
	mounted() {
		var params = {
			add:"sys:filemanager:manager:add",
			edit:"sys:filemanager:manager:edit",
			remove:"sys:filemanager:manager:remove"
		};
		perms(params, (isOk, data) => {
			if(isOk) {
				this.perms = data;
				if(this.perms.edit || this.perms.remove) {
					this.paging.columns.unshift({
				    	type:'selection',
				     	width: 60,
				    	align: 'center',
				    	fixed: 'left'
				    });
				}
			}
			dicts({
				values: {
					fileRange:"FILE-RANGE",
					storageTypes:"STORAGE-MODE",
					fileTypeRange:"FILE-TYPE-RANGE"
				},
				children: true
			}, (isOk, data) => {
				if(isOk) {
					each(data.fileRange.children, (item) => {
						this.fileRange[item.value] = item;
					});
					each(data.storageTypes.children, (item) => {
						this.storageTypes[item.value] = item;
					});
					each(data.fileTypeRange.children, (item) => {
						this.fileTypeRange[item.value] = item;
					});
				}
				this.loadDataGrid();
				this.loading = false;
			});
		});
		this.$nextTick(() => {
            //列表自适应高度
            fit(this.$refs.container, this.paging);
        });
	},
	components: {
		Layout,
        Content,
        Alert,
        Page,
        Row,
        Col,
        Input,
        Button,
        ButtonGroup,
        Table,
        Spin,
        Icon
	}
}
</script>